<template>
  <!--导航条-->
  <div class="x-path-breadcrumb">
    <div ref="content" class="x-path-breadcrumb-wrapper">
      <p v-show="breadCrumbs.length > 1" ref="back" class="el-breadcrumb__inner is-link" @click="goBack">
        <span>返回上一级</span>
        <span style="padding: 0 4px">|</span>
      </p>
      <div ref="breadcrumbs" class="el-breadcrumb" aria-label="Breadcrumb" role="navigation">
        <span
          v-for="(item, index) in breadCrumbs"
          :key="item.id"
          class="el-breadcrumb__item"
          @click="onBreadcrumbClick(item, index)">
          <span ref="link" class="el-breadcrumb__inner is-link" role="link">{{ item.name }}</span>
          <i class="el-breadcrumb__separator el-icon-arrow-right"></i>
        </span>
      </div>
    </div>
    <ResizeObserver @notify="computeBreadcrumbWidth" />
  </div>
</template>

<script>
  import { getComputedWidth, isArray } from '@web-utils/core'

  export default {
    name: 'XMemoryPathBreadcrumb',
    props: {
      value: Array,
      loading: Boolean,
      defaultVal: {
        type: Array,
        default: () => [
          {
            name: '全部文件',
            id: -1
          }
        ]
      }
    },
    data() {
      return {
        breadCrumbs: []
      }
    },
    watch: {
      breadCrumbs: {
        async handler() {
          await this.$nextTick()
          this.computeBreadcrumbWidth()
          this.$emit('input', this.breadCrumbs)
        },
        immediate: true
      },
      value: {
        handler(newVal) {
          if (newVal && isArray(newVal) && newVal.length > 0) {
            this.breadCrumbs = newVal
          } else {
            this.breadCrumbs = this.defaultVal
          }
        },
        immediate: true
      }
    },
    methods: {
      goBack() {
        if (this.loading) {
          this.$message.warning('加载中...')
          return
        }
        this.breadCrumbs.splice(this.breadCrumbs.length - 1, 1)
      },
      onBreadcrumbClick(item, index) {
        if (this.loading) {
          this.$message.warning('加载中...')
          return
        }
        if (this.breadCrumbs.length === 1) {
          return
        }
        this.breadCrumbs.splice(index + 1, this.breadCrumbs.length - index - 1)
      },
      computeBreadcrumbWidth() {
        if (this.$refs.content) {
          const buttons = this.$refs.breadcrumbs.children
          let totalWidth = getComputedWidth(this.$refs.back)
          for (let i = 0; i < buttons.length; i++) {
            const width = getComputedWidth(buttons[i])
            if (!isNaN(width)) {
              totalWidth += width
            }
          }
          this.$refs.content.style.width = `${totalWidth + 30}px`
        }
      }
    }
  }
</script>

<style lang="scss">
  @mixin path-breadcrumb {
    color: var(--color-primary);
    font-weight: normal;

    &:hover {
      text-decoration: underline;
    }
  }

  .x-path-breadcrumb {
    position: relative;
    width: 100%;
    overflow-x: auto;
  }

  .x-path-breadcrumb-wrapper {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    min-width: 100%;
    padding: 6px 10px;
    background-color: white;
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee;

    .el-breadcrumb {
      line-height: 21px;

      .el-breadcrumb__item:last-child {
        .el-breadcrumb__inner.is-link {
          color: #606266;

          &:hover {
            text-decoration: none;
          }
        }
      }

      .el-breadcrumb__inner.is-link {
        @include path-breadcrumb;
      }
    }

    .el-breadcrumb__inner.is-link {
      @include path-breadcrumb;
    }
  }
</style>
